<script src="js/url-config.js"></script>
<!-- bootstrap引入 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 样式添加 -->
<style>
    .welcome .search-box {
        width: 80vw;
        height: 20vh;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    .box:hover {
        box-shadow: 0 8px 8px rgba(10, 16, 20, .24), 0 0 8px rgba(10, 16, 20, .12);
        text-decoration: none;
        cursor: pointer;
        border: 0;
        transform: translateY(-5px);
    }

    .text_hidden {
        height: 3.8rem;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: center;
    }

    .head {
        margin-top: 2rem;
        height: 3.8rem;
        line-height: 3.8rem;
    }

    .photo_hight {
        position: relative;
        height: 25rem;
    }

    .photo_hight a {
        color: #000;
    }

    .recommend {
        color: red;
        position: absolute;
        background-color: #fff;
        top: 0rem;
        right: 0rem;
    }

    .photo_hidden {
        width: 100%;
        height: 15.5rem;
    }

    .photo_hidden img {
        height: 15.5rem;
        width: 100%;
    }

    .under {
        width: 100%;
        margin-top: 2rem;
        height: 30rem;
        background: url(images/under.png);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: 40% 45%;
    }

    .under_main {
        display: flex;
        height: 30rem;
        margin: 0 auto;
        overflow: hidden;
        justify-content: space-between;
    }

    .under_main ul {
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        height: 6rem;
        margin-top: 6rem;
        padding: 0px;
    }

    .under_main ul li {
        height: 1.6rem;
        line-height: 1.6rem;
        padding: 1.6rem 0px;
        font-weight: bold;
        font-size: 1.6rem;
        overflow: hidden;
    }

    .under_logo {
        height: 18rem;
        margin-top: 6rem;
    }

    .under_main ul li a {
        text-decoration: none;
        color: white;
    }

    .under_logo img {
        padding-bottom: 1rem;
        border-bottom: solid 1px white;
    }

    .under_logo p {
        margin: 0px;
        height: 4rem;
        padding: 1rem 0px;
        color: white;
        line-height: 2rem;
        font-size: 1.38rem;
    }

    .carousel_height {
        height: 35vw;
        text-align: center;
    }

    .carousel_height img {
        /*width: 100vw;*/
        max-width: 100vw;
        max-height: 35vw;
    }
</style>
<div class="welcome">
    <!--    搜索框-->
    <!--    <form class="layui-form search-box" action="">-->
    <!--        <select name="search">-->
    <!--            <option value="0" selected="">全站</option>-->
    <!--            <option value="1">时间</option>-->
    <!--            <option value="2">主题</option>-->
    <!--        </select>-->
    <!--        <input type="text" placeholder="请填写搜索关键字" class="layui-input" />-->
    <!--        <button type="button" class="layui-btn layui-btn-primary">搜索</button>-->
    <!--    </form>-->
    <!--    轮播图start-->
    <div class="layui-carousel" id="index-carousel">
        <div carousel-item id="index-carousel-img-body">
            <!--            <div class="carousel_height"><img src="images/test.png" alt=""></div>-->
            <!--            <div class="carousel_height"><img src="images/test.png" alt=""></div>-->
            <!--            <div class="carousel_height"><img src="images/test.png" alt=""></div>-->
            <!-- 条目中可以是任意内容，如：<img src=""> -->
        </div>
    </div>
    <!--    轮播图end-->
    <!-- 热门推荐 -->
    <div class="container " style="margin-top: 2rem; background-color: #fff; ">
        <div class="head">
            <h3><strong>热门推荐</strong></h3>
        </div>
        <div class="row " id="album-row-1">
            <!--            <div class=" col-md-3 box col-xs-6 photo_hight">-->
            <!--                <a href="#">-->
            <!--                    <div class="photo_hidden"><img src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8807%E6%97%A5__7f41b4201612184c515924169a8079b09d09a147%2F4103535362.jpg " alt=" " class="img-responsive center-block"></div>-->
            <!--                    <h4 style="text-align: center;"><strong>河大LOGO</strong> </h4>-->
            <!--                    <p class="text_hidden">测试用</p>-->
            <!--                    <span class="layui-badge-rim recommend layui-bg-blue">Hot</span>-->
            <!--                </a>-->
            <!--            </div>-->
        </div>
    </div>
    <!-- 最新更新 -->
    <div class="container " style="margin-top: 2rem; background-color: #fff; ">
        <div class="head">
            <h3><strong>最新上传</strong></h3>
        </div>
        <div class="row " id="album-row-2">
        </div>
    </div>
    <!-- 全体相册预览 start-->
    <div class="container" style="margin-top: 2rem; text-align: center;">
        <a href="#/page/all_photo.html">
            <h4>查看更多</h4>
        </a>
    </div>
    <!-- 全体相册预览end -->
    <!-- 友情链接 start-->
    <div class="under">
        <div class="container">
            <div class="under_main row">
                <div class="col-md-4 col-xs-8">
                    <ul>
                        <li>
                            <a href="http://news.henu.edu.cn/" target="_blank">新闻资讯</a>
                        </li>
                        <li>
                            <a href="http://iao.henu.edu.cn/" target="_blank">国际交流</a>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href="http://www.henu.edu.cn/xxgk.htm" target="_blank">河大概况</a>
                        </li>
                        <li>
                            <a href="http://rsc.henu.edu.cn/" target="_blank">师资队伍</a>
                        </li>
                    </ul>
                </div>
                <div class="under_logo col-md-4 col-xs-4">
                    <a href="http://www.henu.edu.cn/">
                        <img class="img-responsive" src="images/henu.png" alt="">
                    </a>
                    <p>
                        地址：中国 河南 开封.明伦街/金明大道<br> 邮编：475001/475004
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- 友情链接 end-->
    <!-- 版权声明 start-->
    <div class=" panel-default " style="height: 3rem; ">
        <h3 style="text-align: center ;line-height: 3rem; ">河南大学档案馆 版权所有<a href="page/admin/login.html" style="float: left"><i class="fa fa-sign-in" aria-hidden="true"></i></a></h3>
    </div>
    <!-- 版权声明 end -->
</div>
<!--<script src="/static/build/layui.js"></script>-->
<script>
    //轮播图
    layui.use('carousel', function() {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#index-carousel',
            width: '100%', //设置容器宽度
            anim: 'fade',
            arrow: 'none' //始终显示箭头
                //,anim: 'updown' //切换动画方式
        });
    });

    function qq(message) {
        console.log(message);
        carouselData = message.data;
        var i = 0;
        for (i = 0; i < carouselData.length; i++) {
            jq1111("#index-carousel-img-body").append('<div class="carousel_height"><img src="' + BasePath + 'api/CarouselImages/' + carouselData[i].fileName + '"></div>')
        }
    }

    //轮播图获取
    var carouselData;
    try{
        jq1111.ajax({
            type: "GET",
            crossDomain: true,
            url: BasePath + "api/Carousel",
            contentType: "application/json",
            dataType: "json",
            async: false,
            xhrFields: {
                withCredentials: true
            },
            error: function(message) {
                console.log(message.responseJSON);
                // layer.msg('失败:'+message.responseJSON.msg);
            },
            success: qq,
        });
    }
    catch (e) {
        console.log(e)
    }


    //推荐相册获取
    var HRData;
    jq1111.ajax({
        type: "GET",
        crossDomain: true,
        url: BasePath + "api/HotRecommend/Get",
        contentType: "application/json",
        dataType: "json",
        async: false,
        xhrFields: {
            withCredentials: true
        },
        success: function(message) {
            console.log(message);
            HRData = message.data;
            var limit=4;
            if(message.data.length<limit){
                limit=message.data.length;
            }
            var selecter;
            for (i = 0; i <limit; i++) {
                selecter = jq1111('#album-row-1')
                    //获取相册信息
                var albumData;
                jq1111.ajax({
                    type: "GET",
                    crossDomain: true,
                    url: BasePath + "api/PersonalAlbum/" + HRData[i].albumId,
                    contentType: "application/json",
                    dataType: "json",
                    async: false,
                    xhrFields: {
                        withCredentials: true
                    },
                    error: function(message) {
                        console.log(message.responseJSON);
                        // layer.msg('失败:'+message.responseJSON.msg);
                    },
                    success: function(message) {
                        albumData = message.data;
                    },
                });

                //获取相册资源信息
                var albumResData;
                jq1111.ajax({
                    type: "GET",
                    crossDomain: true,
                    url: BasePath + "api/Album/" + HRData[i].albumId + "/resources",
                    contentType: "application/json",
                    dataType: "json",
                    async: false,
                    xhrFields: {
                        withCredentials: true
                    },
                    error: function(message) {
                        console.log(message.responseJSON);
                        // layer.msg('失败:'+message.responseJSON.msg);
                    },
                    success: function(message) {
                        albumResData = message.data;
                    },
                });
                console.log('热门推荐')
                selecter.append('<div class=" col-md-3 box col-xs-6 photo_hight">\n' +
                    '                <a href="page/new-show.html?albumId=' + HRData[i].albumId + '">\n' +
                    '                    <div class="photo_hidden"><img\n' +
                    '                            src="' + BasePath + 'api/resource/' + albumResData[0].resourceId + '"\n' +
                    '                            alt=" " class="img-responsive center-block"></div>\n' +
                    '                    <h4 style="text-align: center;"><strong>' + albumData.title + '</strong></h4>\n' +
                    '                    <p class="text_hidden">' + albumData.description + '</p>\n' +
                    '                    <span class="layui-badge-rim recommend layui-bg-blue">Hot</span>\n' +
                    '                </a>\n' +
                    '            </div>')
            }
        },
        error: function(message) {
            console.log(message.responseJSON);
            // layer.msg('失败:'+message.responseJSON.msg);
        },
    });

    //最近创建相册获取
    var RecenetData;
    jq1111.ajax({
        type: "GET",
        crossDomain: true,
        url: BasePath + "api/Album/Recently?type=PersonalAlbum&limit=8",
        contentType: "application/json",
        dataType: "json",
        async: false,
        xhrFields: {
            withCredentials: true
        },
        success: function(message) {
            console.log(message);
            RecenetData = message.data;
            if(RecenetData.length===0){
                console.log('无最新上传')
                return
            }
            //数量不够就拿热门来凑
            console.log('recent', RecenetData)
            while (RecenetData.length < 4) {
                console.log(RecenetData)
                RecenetData.push(RecenetData[0]);
            }
            var selecter;
            var recentCount=0;
            for (i = 0; recentCount < 4; i++) {
                selecter = jq1111('#album-row-2')
                //获取相册信息
                var RalbumData;
                jq1111.ajax({
                    type: "GET",
                    crossDomain: true,
                    url: BasePath + "api/PersonalAlbum/" + RecenetData[i].id,
                    contentType: "application/json",
                    dataType: "json",
                    async: false,
                    xhrFields: {
                        withCredentials: true
                    },
                    error: function(message) {
                        console.log(message.responseJSON);
                        // layer.msg('失败:'+message.responseJSON.msg);
                    },
                    success: function(message) {
                        RalbumData = message.data;
                    },
                });

                //获取相册资源信息
                var RalbumResData;
                jq1111.ajax({
                    type: "GET",
                    crossDomain: true,
                    url: BasePath + "api/Album/" + RecenetData[i].id + "/resources",
                    contentType: "application/json",
                    dataType: "json",
                    async: false,
                    xhrFields: {
                        withCredentials: true
                    },
                    error: function(message) {
                        console.log(message.responseJSON);
                        // layer.msg('失败:'+message.responseJSON.msg);
                    },
                    success: function(message) {
                        RalbumResData = message.data;
                    },
                });
                if(RalbumResData.length===0){
                    console.log(RalbumResData)
                    continue
                }
                selecter.append('<div class=" col-md-3 box col-xs-6 photo_hight">\n' +
                    '                <a href="page/new-show.html?albumId=' + RecenetData[i].id + '">\n' +
                    '                    <div class="photo_hidden"><img\n' +
                    '                            src="' + BasePath + 'api/resource/' + RalbumResData[0].resourceId + '"\n' +
                    '                            alt=" " class="img-responsive center-block"></div>\n' +
                    '                    <h4 style="text-align: center;"><strong>' + RalbumData.title + '</strong></h4>\n' +
                    '                    <p class="text_hidden">' + RalbumData.description + '</p>\n' +
                    '                    <span class="layui-badge-rim recommend layui-bg-blue">New</span>\n' +
                    '                </a>\n' +
                    '            </div>')
                recentCount++
            }
        },
        error: function(message) {
            console.log(message.responseJSON);
            // layer.msg('失败:'+message.responseJSON.msg);
        }
    });
    try{

        layui.use('layer', function() {
            var $ = layui.jquery,
                layer = layui.layer;

            var noticeData;
            //获取公告的内容
            jq1111.ajax({
                type: "GET",
                crossDomain: true,
                url: BasePath + "api/Notification/GetAlertNotices",
                contentType: "application/json",
                dataType: "json",
                async: false,
                xhrFields: {
                    withCredentials: true
                },
                success: function(message) {
                    noticeData = message.data
                    console.log(message)
                },
                error: function(message) {
                    console.log(message.responseJSON);
                    //layer.msg('失败:' + message.responseJSON.msg);
                },
            });
            if(noticeData===undefined){
                return;
            }
            var lastNoticeTime = localStorage.getItem("lastNoticeTime");
            var timestamp = new Date().getTime();
            if (lastNoticeTime == null || lastNoticeTime - timestamp > 600000) {
                //弹出公告
                layer.open({
                    type: 1,
                    title: noticeData.title,
                    closeBtn: false,
                    area: '300px;',
                    shade: 0.8,
                    id: 'LAY_layuipro', //设定一个id，防止重复弹出,
                    btn: ['确定'],
                    btnAlign: 'c',
                    moveType: 1, //拖拽模式，0或者1,
                    content: noticeData.content,
                    success: function(layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').click(function() {
                            var lastTime = localStorage.getItem("lastNoticeTime");
                            localStorage.setItem("lastNoticeTime", timestamp);
                            console.log(lastTime, timestamp)
                        });
                    }
                });
            }
        });
    }
    catch (e) {
        console.log(e)
    }

    //轮播图
    layui.use('carousel', function() {
        var carousel = layui.carousel;
        //建造实例
        var lunbo=carousel.render({
            elem: '#index-carousel',
            width: '100%', //设置容器宽度
            anim: 'fade',
            arrow: 'none' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
        lunbo.reload()
    });

    //不知道为什么会有一个width参数，将他设为unset
    jq1111(document).ready(function() {
        window.setInterval(function() {
            $('#index-carousel').css("height", "35vw")
        }, 1000);
    })
</script>